<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .cz a{
            border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;
        }
        .cz a:hover{background:#09F; color:#FFF; border-color:#09F; }
    </style>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 角色管理</strong></div>
    <div class="padding border-bottom">
        <!--<input type="text" name="title" style="width: 10%" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        <button style="margin-left: 10px" type="button" class="button border-yellow" onclick="window.location.href='#add'"><span class="icon-plus-square-o"></span> 查询</button>-->
        <div class="layui-form-item layui-inline">
            <div class="layui-form-item layui-inline">
                <label class="layui-btn " style="text-align: center" th:onclick="addRole()" ><i class="layui-icon">&#xe654;</i></label>
            </div>
        </div>
    </div>

    <table id="coursetable" class="table table-hover text-center">
        <tr >
            <th >ID</th>
            <th >角色名</th>
            <th >描述</th>
            <th >状态</th>
            <th >操作</th>
        </tr>
        <tbody>
            <tr th:each="role:${roles}">
                <th th:text="${role.getRoleId()}">ID</th>
                <th th:text="${role.getRname()}">角色名</th>
                <th th:text="${role.getPerson()}"></th>
                <th width="5%">
                    <button class="layui-btn layui-btn-xs" th:if="${role.getStatus()} =='正常'" th:text="${role.getStatus()}"></button>
                    <button class="layui-bg-red layui-btn layui-btn-xs" th:if="${role.getStatus()} =='注销'" th:text="${role.getStatus()}"></button>
                </th>
                <th class="cz" width="15%">
                    <a th:onclick="'update('+${role.getRoleId()}+')'"><i class="layui-icon">&#xe642;</i></a>
                    <a th:href="@{/role/delRole/}+${role.getRoleId()}"><i class="layui-icon">&#xe640;</i></a>
                    <a th:onclick="'perms('+${role.getRoleId()}+')'"><i class="layui-icon">&#xe672;</i></a>
                </th>
            </tr>
        </tbody>
    </table>
</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use('layer',function(){
        var layer=layui.layer;
    });
    function addRole(){

        layer.open({
            type: 2,
            area: ['600px', '360px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/role/addRole/}]]
    });
    }
    function update(roleId){

        layer.open({
            type: 2,
            title:'修改角色',
            area: ['600px', '360px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/role/editRole/}]]+roleId
    });
    }
    function perms(roleId){
        alert("perms");
        layer.open({
            type: 2,
            title:'修改角色',
            area: ['600px', '360px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/role/addPerms/}]]+roleId
    });
    }
</script>
</html>